<template>
  <div class="container" v-if="postdetail.length>0">
    <el-row type="flex" justify="space-between">
      <div class="main">
        <el-breadcrumb separator-class="el-icon-arrow-right">
          <el-breadcrumb-item :to="{ path: '/post' }">旅游攻略</el-breadcrumb-item>
          <el-breadcrumb-item>攻略详情</el-breadcrumb-item>
        </el-breadcrumb>
        <!-- //头部信息部分 -->
        <div class="headerInfo">
          <h1>{{postdetail[0].title}}~</h1>
          <div class="usrInfo">
            <span>攻略：{{this.$moment(postdetail[0].created_at).format("YYYY-MM-DD")}}</span>
            <span>阅读：{{postdetail[0].watch}}</span>
          </div>
        </div>
        <!-- //内容部分 -->
        <div class="detailContent" v-html="postdetail[0].content"></div>
        <!-- 文章评论和分享部分 -->
        <div class="post-operation">
          <div class="comment">
            <i class="iconfont iconpinglun" data-v-a79d12ca></i>
            <p>评论({{totalpage}})</p>
          </div>
          <div class="share">
            <i class="iconfont iconfenxiang" data-v-a79d12ca></i>
            <p>分享</p>
          </div>
        </div>
        <!-- 发表文章评论部分 -->
        <div class="publish-comment">
          <Comment :cmtData="CommentList" @RefreshCmt="handleRefreshCmt"></Comment>
          <!-- 分页组件 -->
          <div class="block" v-if="CommentList.length>0">
            <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="pageIndex"
              :page-sizes="[2,4,6,8]"
              :page-size="100"
              layout="total, sizes, prev, pager, next, jumper"
              :total="totalpage"
            ></el-pagination>
          </div>
        </div>
      </div>
      <div class="aside" v-if="RecommendList.length>0">
        <DetailAside :recommendlist="RecommendList"></DetailAside>
      </div>
    </el-row>
  </div>
</template>
<script>
import Comment from "@/components/post/Comments/Comment.vue";
import DetailAside from "@/components/post/DetailAside.vue";
export default {
  components: {
    Comment,
    DetailAside
  },
  data() {
    return {
      postdetail: [],
      CommentList: [],
      RecommendList: [],
      pageIndex: 0,
      pageSize: 2,
      totalpage: 5
    };
  },
  mounted() {
    this.getPostDetails();
    this.getPostComments();
    this.getRecommendPost();
  },
  methods: {
    handleSizeChange(size) {
      console.log(`每页 ${size} 条`);
      this.pageSize = size;
      this.pageIndex = 0;
      this.getPostComments();
    },
    handleCurrentChange(index) {
      console.log(`当前页: ${index}`);
      this.pageIndex = index;
      this.getPostComments();
    },
    getPostDetails() {
      this.$axios({
        url: "/posts",
        method: "get",
        params: {
          id: this.$route.query.id
        }
      }).then(res => {
        console.log("文章详情", res);
        const { data } = res.data;
        this.postdetail = data;
      });
    },
    getPostComments() {
      this.$axios({
        url: "/posts/comments",
        method: "get",
        params: {
          post: this.$route.query.id,
          _limit: this.pageSize,
          _start: this.pageIndex
        }
      }).then(res => {
        console.log("评论数据", res);
        const { data, total } = res.data;
        this.CommentList = data;
        this.totalpage = total;
      });
    },
    getRecommendPost() {
      this.$axios({
        url: "/posts/recommend",
        method: "get",
        params: {
          id: this.$route.query.id
        }
      }).then(res => {
        console.log("推荐文章列表", res);
        const { data } = res.data;
        this.RecommendList = data;
      });
    },
    handleRefreshCmt() {
      // 调用获取评论的数据列表
      this.getPostComments();
    }
  }
};
</script>
<style lang="less" scoped>
.container {
  width: 1000px;
  margin: 20px auto;
  .main {
    width: 700px;
    height: fit-content;
    .headerInfo {
      h1 {
        padding: 20px 0;
        border-bottom: 1px solid #ddd;
      }
      .usrInfo {
        font-size: 16px;
        color: #999;
        text-align: right;
        padding: 20px;
      }
    }
    .detailContent {
      line-height: 1.5;
      /deep/ img {
        width: 100%;
        object-fit: cover;
      }
    }
    .post-operation {
      padding: 50px 0 30px;
      display: flex;
      justify-content: center;
      .comment,
      .share {
        margin: 0 20px;
        text-align: center;
        cursor: pointer;
        p {
          font-size: 14px;
          color: #999;
          margin-top: 5px;
        }
      }
      .iconpinglun,
      .iconfenxiang {
        display: block;
        font-size: 28px;
        color: orange;
      }
    }
    .publish-comment {
      .block {
        margin: 10px auto;
        text-align: center;
      }
    }
  }
  .aside {
    width: 280px;
    height: fit-content;
  }
}
</style>